<template>
	<scroll-view v-if="nest" scroll-x="true" enable-flex="true" class="myuni-scroll">
		<swiper v-if="isScroll" class="swiper-container scroll-item" vertical :autoplay="true" circular :interval="3000" :duration="1000">
			<swiper-item @click="clickItem(item,index)" class="swiper-item" v-for="(item,index) in list.slice(0,3)" :key="item.id">
				<navigator :url="path+'?id='+item.id" class="scroll-item">
					<view class="cover">
						<image :src="item.picUrl||item.cover" :lazy-load="true" mode="widthFix"></image>
						<view class="swiper-tag">
						  <i class="iconfont icon-circulationxunhuan"></i>
						</view>
					</view>
					<view class="item-name">{{item.name}}</view>
				</navigator>
			</swiper-item>
		</swiper>
		<navigator @click="clickItem(item,index)" :url="path+'?id='+item.id" class="scroll-item" v-for="(item,index) in isScroll?list.slice(3):list" :key="item.id">
			<view class="cover">
				<image :src="item.picUrl||item.cover" :lazy-load="true" mode="widthFix"></image>
				<view class="normal-tag" v-if="item.playCount">
					<i class="iconfont icon-24gl-play"></i><text>{{(item.playCount/10000).toFixed(1)}}万</text>
				</view>
			</view>
			<view class="item-name">{{item.name}}</view>
		</navigator>
	</scroll-view>
	<scroll-view v-else scroll-x="true" enable-flex="true" class="myuni-scroll">
		<swiper v-if="isScroll" class="swiper-container scroll-item" vertical :autoplay="true" circular :interval="3000" :duration="1000">
			<swiper-item @click="clickItem(item,index)" class="swiper-item" v-for="(item,index) in list.slice(0,3)" :key="item.id">
				<navigator :url="path" class="scroll-item">
					<view class="cover">
						<image :src="item.picUrl||item.cover" :lazy-load="true" mode="widthFix"></image>
						<view class="swiper-tag">
						  <i class="iconfont icon-circulationxunhuan"></i>
						</view>
					</view>
					<view class="item-name">{{item.name}}</view>
				</navigator>
			</swiper-item>
		</swiper>
		<navigator @click="clickItem(item,index)" :url="path" class="scroll-item" v-for="(item,index) in isScroll?list.slice(3):list" :key="item.id">
			<view class="cover">
				<image :src="item.picUrl||item.cover" :lazy-load="true" mode="widthFix"></image>
				<view class="normal-tag" v-if="item.playCount">
					<i class="iconfont icon-24gl-play"></i><text>{{(item.playCount/10000).toFixed(1)}}万</text>
				</view>
			</view>
			<view class="item-name">{{item.name}}</view>
		</navigator>
	</scroll-view>
</template>

<script>
import { mapState } from 'vuex';
	export default {
		props:{
			nest:{
				type:Boolean,
				default:false
			},
			isScroll:{
				type:Boolean,
				default:false
			},
			list:{
				type:[Array,Object],
				default:[]
			},
			path:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				
			}
		},
		computed:{
			...mapState(['themeType'])
		},
		methods: {
			clickItem(item,index){
				item.index=index
				this.$emit('emitClickItem',item)
			}
		}
	}
</script>
<style scoped lang="scss">
.myuni-scroll{
	display: flex;
	height: 248rpx;
	overflow: hidden;
	white-space: nowrap;
	::v-deep.uni-scroll-view-content{
			  display: flex;
	}
	.cover{
		
	}
	::v-deep.swiper-container{
		width: 180rpx;
	    height: 248rpx;
		.scroll-item{
			padding: 0;
		}
	}
	.scroll-item{
	  padding: 0 20rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  flex-shrink: 0;
	  width: 180rpx;
	  .cover{
		  position: relative;
		  width: 100%;
		  max-height: 188rpx;
		  color: #fff;
		  image{
		  	width: 100%;
		  	border-radius: 10rpx;
		  }
		  .swiper-tag{
			 position: absolute;
			 right: 6rpx;
			 top: 6rpx;
			 height: 12px;
			 line-height: 12px;
			 font-weight: 700;
		  }
		  .normal-tag{
			  padding: 0 10rpx;
			  display: flex;
			  position: absolute;
			  right: 6rpx;
			  top: 6rpx;
			  height: 12px;
			  line-height: 12px;
			  background-color: #ccc;
			  opacity: .5;
			  border-radius: 16rpx;
			  text,i{
				 font-size: 12px;
			  }
		  }
	  }
	  .item-name{
	  	width: 100%;
	  	height: 30px;
	  	display: -webkit-box;
	  	overflow: hidden; 
	  	-webkit-box-orient: vertical;
	  	-webkit-line-clamp: 2;
	  	font-size: 24rpx;
	  	color: #535355;
	  	white-space: pre-wrap;
	  }
	}
}
</style>
